import { IconButton, Typography, styled } from '@mui/material'
import { TProductCart, cartSlice } from '../../store/reducers/slices/cartSlice'
import AddIcon from '@mui/icons-material/Add'
import RemoveIcon from '@mui/icons-material/Remove'
import { useAppDispatch, useAppSelector } from '../../hooks'
import { selectCartProducts } from '../../store/reducers/selectors'

type TAmountSelector = Pick<TProductCart, '_id'>

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'space-between',
	flexDirection: 'row',
	width: '102px',
	height: '36px',
	padding: '8px',
	borderRadius: '100px',
	border: '1px solid #CFD8DC',
}))

const AmountSelector = ({ _id }: TAmountSelector) => {
	const dispatch = useAppDispatch()
	const cartProducts = useAppSelector(selectCartProducts)
	const purchaseAmount = cartProducts
		? cartProducts.find((product) => product._id === _id)?.purchaseAmount
		: 0

	return (
		<StyledContainer>
			<IconButton
				onClick={() => dispatch(cartSlice.actions.minusPurchaseAmount({ _id }))}
			>
				<RemoveIcon />
			</IconButton>
			<Typography>{purchaseAmount}</Typography>
			<IconButton
				onClick={() => dispatch(cartSlice.actions.plusPurchaseAmount({ _id }))}
			>
				<AddIcon />
			</IconButton>
		</StyledContainer>
	)
}

export default AmountSelector
